<template>
	<!-- 主页 -->
	<view class="indexContainer">
		<!-- 搜索框 -->
		<searchInput/>
		<!-- 轮播图 -->
		<view class="bannersContainer">
			<swiper class="banners" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular indicator-active-color="#7bbfea">
				<swiper-item v-for="item in bannersList" :key="item.good_id">
					<image :src="item.image_src" mode="widthFix"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 导航 -->
		<view class="navContainer">
			<view class="navItem" v-for="(item,index) in navlist" :key="index" @click="[ index === 0 ? switchToCategory() : '']">
				<image :src="item.image_src" mode="widthFix" ></image>
				<!-- <text>{{item.name}}</text> -->
			</view>
		</view>
		<!-- 楼层 -->
		<view class="floorContainer">
			<view class="floorItem" v-for="(item1,index1) in floorList" :key='index1'>
				<!-- 楼层头部 -->
				<view class="floorTitle">
					<image class="titlePic" :src="item1.floor_title.image_src"></image>
				</view>
				<view class="floorPicList">
					<navigator v-for="(item2,index2) in item1.product_list" :key='index2'>
						<image :src="item2.image_src" :class=" [ index2 === 0 ? 'setHightFirst':'setHight' ] "></image>
					</navigator>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {request} from '../../static/utils/request.js'
	import searchInput from '../../component/searchInput.vue'
	
	export default {
		data() {
			return {
				bannersList:[], //轮播图数据
				navlist:[],		//导航数据
				floorList:[]	//楼层数据
			}
		},
		async onLoad() {
			this.getBannersList()
			this.getNavList()
			this.getFloorList()
			// this.getData(this.floorList,'/home/floordata')
		},
		methods: {
			//获取轮播图
			async getBannersList(){		
				let bannersListData = await request('/home/swiperdata')
				if(bannersListData.data.meta && bannersListData.data.meta.status == 200){
					this.bannersList = bannersListData.data.message;
				}else{
					uni.showToast({
						title:无法获取数据,
						icon:error
					})
				}
				
			},
			//获取导航标签
			async getNavList(){			
				let navListData = await request('/home/catitems');
				console.log(navListData.data.message);
				if(navListData.data.meta && navListData.data.meta.status == 200){
					this.navlist = navListData.data.message;
				}else{
					uni.showToast({
						title:无法获取数据,
						icon:error
					})
				}
			},
			//获取楼层数据
			async getFloorList(){		
				let floorListData = await request('/home/floordata');
				console.log(floorListData.data.message);
				if(floorListData.data.meta && floorListData.data.meta.status == 200){
					this.floorList = floorListData.data.message;
				}else{
					uni.showToast({
						title:无法获取数据,
						icon:error
					})
				}
			},
			switchToCategory(){
				uni.switchTab({
					url:"/pages/category/category"
				})
			}
			
		},
		components:{
			searchInput
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #ebebeb;
	}
	.indexContainer{
		.bannersContainer{
			width: 96%;
			margin: 10upx auto;
			border-radius: 16upx;
			overflow: hidden;
			.banners{
				width: 750upx;
				height: 340upx;
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
		.navContainer{
			width: 96%;
			height: 200upx;
			margin: 10upx auto;
			background-color: #fff;
			border-radius: 16upx;
			display: flex;
			justify-content: center;
			align-items: center;
			align-content: space-around;
			.navItem{
				width: 20%;
				margin: 20upx;
				image{
					width: 100%;
				}
			}
		}
		.floorContainer{
			width: 96%;
			overflow: hidden;
			margin: 20upx auto;
			.floorItem{
				width: 100%;
				
				height: 530upx;
				
				margin: 20upx 0;
				padding-top: 10upx;
				background-color: #fff;
				border-radius: 16upx;
				.floorTitle{
					image{
						width: 750upx;
						height: 60upx;
					}
				}
				.floorPicList{
					navigator{
						float: left;
						width: 30%;
						margin-left: 18upx;
						margin-bottom: 28upx;
						.setHightFirst{
							height: 440upx;
						}
						.setHight{
							height: 200upx;
						}
						
						image{
							width: 100%;
							// padding: 10upx;
						}
					}
					
				}
			}
		}
	}
	
	
</style>
